import React, { memo, useState } from "react"
import type { ReactNode, FC } from "react"
import BaseSettingStyle from "./style"
import { Form, Input, Radio } from "antd"

interface IProps {
  children?: ReactNode //这个接口代表react类型的集合
}

const baseSetting: FC<IProps> = (props) => {
  //hooks
  const [formData, setFormData] = useState<any>({
    children: [],
  })
  console.log("dom更新了")
  return (
    <BaseSettingStyle>
      <Form className="form" initialValues={formData}>
        <Form.Item name="path" className="formItem" label="路由路径">
          <Input className="input" placeholder="路由路径"></Input>
        </Form.Item>
        <Form.Item name="label" className="formItem" label="路由名称">
          <Input className="input" placeholder="路由名称"></Input>
        </Form.Item>
        <Form.Item name="hidden" className="formItem" label="是否隐藏">
          <Radio.Group defaultValue={false}>
            <Radio value={true}>是</Radio>
            <Radio value={false}>否</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item className="formItem" label="图标">
          {formData.icon}
        </Form.Item>
      </Form>
    </BaseSettingStyle>
  )
}

export default memo(baseSetting)
